<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <style>
        table, tr, td, th {
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            padding: 10px 20px;
        }
    </style>
    <script th:src="@{jquery-3.7.1.min.js}"></script>
</head>
<body>
<h1>学生列表</h1>
<a th:href="@{/student/addPage}">新增</a>
<form action="" method="get">
    <input type="text" name="name" id="name">
    <input type="text" name="school" id="school">
    <button type="button" onclick="initList()">搜索</button>
</form>
<table>
    <thead>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>学校</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody id="tbody">

    </tbody>
</table>

<script>
    function initList() {
        let name = document.getElementById("name").value
        let school = document.getElementById("school").value
        $.ajax({
            url: `/student2/list?name=${name}&school=${school}`,
            method:"get",
            success(res){
                // DOM 操作， 通过js对象来操作html
                let dom = document.getElementById("tbody")
                dom.innerHTML = ""
                for (let i = 0; i < res.length; i++) {
                    dom.innerHTML += `
                <tr>
                   <td>${res[i].id}</td>
                   <td>${res[i].name}</td>
                   <td>${res[i].age}</td>
                   <td>${res[i].school}</td>
                   <td>
                        <button onclick="deleteStudent(${res[i].id})">删除</button>
                    </td>
                </tr>
            `
                }

            }
        })
    }

    initList()

    function deleteStudent(id){
        console.log(id)
        $.ajax({
            url:"student2/delete?id="+id,
            method: "get",
            success(res) {
                console.log(res)
                initList()
            }
        })
    }
</script>
</body>
</html>